import React,{useRef,useState,useEffect} from 'react';

export default () =>{
    //useRef() Hooks 不仅适用于 DOM 引用。 “ref” 对象是一个通用容器，
    //其 current 属性是可变的，可以保存任何值（可以是元素、对象、基本类型、甚至函数），类似于类上的实例属性。
    const inputEl=useRef(null);
    const textRef =useRef();
    const [text,updateText]=useState('');

    useEffect(()=>{
        //通过current可以存储一个“实时可变”的值
        //通过useState改变text的值，使current存储的值同时也发生改变
        //并且.current不会引起重新渲染
        textRef.current = text;
        console.log('textRef.current:',textRef.current);
    });

    const onButtonClick=()=>{
        //"current" points to the mounted text input element
        inputEl.current.value="Hello,useRef";
    };

    return (
        <>
            <input ref={ inputEl } type="text" />
            <button onClick={ onButtonClick }>在 input 上展示文字</button>
            <p>依赖变化</p>
            <input value={textRef.current}/>
            <p>主变化</p>
            <input value={text} onChange={(e)=>updateText(e.target.value)}/>
        </>
    )
}
